<template>
  <div class="mapbox" ref="map">我是地图组件</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
//引入echarts
import * as echarts from 'echarts'
// 引入中国地图的数据
import chinaJson from './china.json'
// 创建一个map实例
let map = ref()
// 注册一个中国地图
echarts.registerMap('china', chinaJson)
// 组件挂载完毕
onMounted(() => {
  let mychart = echarts.init(map.value)
  //设置配置项
  mychart.setOption({
    //地图组件
    geo: {
      map: 'china', //中国地图
      roam: true, //鼠标缩放的效果
      //地图的位置调试
      left: 150,
      top: 150,
      right: 150,
      zoom: 1.2,
      bottom: 0,
      //地图上的文字的设置
      label: {
        show: true, //文字显示出来
        color: 'white',
        fontSize: 14,
      },

      itemStyle: {
        //每一个多边形的样式
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'white', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'blue', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        opacity: 0.5,
      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: 'skyblue',
        },
        label: {
          fontSize: 24,
          color: 'white',
        },
      },
    },
    //布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'lines', //航线的系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'orange',
              width: 5,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [114.298572, 30.584355], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'yellow',
              width: 5,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [117.190182, 39.125596],
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'orange',
              width: 5,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [111.670801, 40.818311],
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'orange',
              width: 5,
            },
          },
        ],
        //开启动画特效
        effect: {
          show: true,
          symbol:
            'path://M341.956729 977.69286a22.387912 22.387912 0 0 1-20.616827-13.676351l-75.731435-179.448559-180.804046-77.048559a22.371927 22.371927 0 0 1-6.806207-36.649296l57.384409-55.658082a22.378321 22.378321 0 0 1 12.010765-6.029359l173.387231-28.001673 500.762886-500.702145c19.191009-19.712104 45.191421-30.687072 73.00128-30.687072 26.799638 0 52.122307 10.306815 71.303724 29.021486 19.542668 19.027967 30.508045 44.55204 30.856508 71.850395 0.345266 27.304749-9.96155 53.103756-29.034273 72.64962L445.485236 725.569105l-24.881496 176.321988a22.378321 22.378321 0 0 1-6.326671 12.688508l-56.489276 56.550017a22.378321 22.378321 0 0 1-15.831064 6.563242z m-228.626518-298.143174l158.147595 67.390715a22.384715 22.384715 0 0 1 11.844525 11.886086l66.316556 157.130979 27.694771-27.723543 24.881496-176.328381a22.41029 22.41029 0 0 1 6.333065-12.698099L915.82959 191.86533c10.524205-10.789548 16.316993-25.284306 16.121982-40.626243a56.984796 56.984796 0 0 0-17.346396-40.370491 57.058325 57.058325 0 0 0-40.060391-16.316993 56.968811 56.968811 0 0 0-41.144142 17.365577L327.311717 617.948562a22.362336 22.362336 0 0 1-12.253729 6.26593l-173.572652 28.033643-28.155125 27.301551zM832.553464 552.121133a22.378321 22.378321 0 0 1-15.821473-38.202991l65.888171-65.884974a22.378321 22.378321 0 1 1 31.642946 31.646143l-65.888171 65.888171a22.311186 22.311186 0 0 1-15.821473 6.553651zM861.964971 671.973026a22.378321 22.378321 0 0 1-15.827866-38.196597l65.859398-65.888171a22.378321 22.378321 0 0 1 31.655734 31.636552l-65.859399 65.888171a22.304792 22.304792 0 0 1-15.827867 6.560045zM502.505198 222.072867a22.378321 22.378321 0 0 1-15.821473-38.202991l65.888171-65.856202a22.378321 22.378321 0 1 1 31.636552 31.652537l-65.884974 65.856202a22.304792 22.304792 0 0 1-15.818276 6.550454zM382.685274 192.725297a22.378321 22.378321 0 0 1-15.827867-38.196597l65.888171-65.92014a22.378321 22.378321 0 0 1 31.652536 31.639749l-65.888171 65.92014a22.301595 22.301595 0 0 1-15.824669 6.556848z',
          // color: 'black',
          symbolSize: 20,
        },
      },
    ],
  })
})
</script>

<style scoped></style>
